<template>
	<view class="wap_content">
		<view class="status_bar"></view>
		<view class="banner_box">
			<u-swiper indicatorMode="dot" indicator autoplay imgMode="widthFix" :list="bannerList"></u-swiper>
		</view>
		
		<view class="grid_box">
			<u-grid :border="false" col="4" @click="gridCilck">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon  :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="46"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="song_box" v-if="songList.length>0">
			<view class="song_box_title display_flex_between">
				<view class="song_box_title_l">发现好歌单</view>
				<view class="song_box_title_r" @click="uni.$link('/pages/song/song')">查看更多>></view>
			</view>
			
			<view class="song_item_box">
				<view class="song_item" v-for="(item, index) in songList" :key="item.id" @click="uni.$link('/pages/put/put?name='+item.pname+'&id='+item.id)">
					<view class="song_poser_box">
						<image class="song_poser_img" :src="item.picUrl" mode="widthFix"></image>
						<view class="song_poser_desc display_flex_center">
							<u-icon color="#ffffff" size="16" name="play-right"></u-icon> <text>{{ uni.$friendNum(item.playCount) }}</text>
						</view>
					</view>
					<view class="song_title">{{ item.name }}</view>
				</view>
				
			</view>
		</view>
		
		<x-play-card v-if="showPlayCard"></x-play-card>
		
	</view>
</template>
<script>
	var app=getApp();
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				putId:0,
				songList:[],
				baseList: [{
						url:"/pages/put/put",
						name: '/static/music.png',
						title: '每日推荐'
					},
					{
						url:"/pages/mv/mv",
						name: '/static/mv.png',
						title: 'MV榜单'
					},
					{
						url:"/pages/song/song",
						name: '/static/song.png',
						title: '歌单'
					},
					// {
					// 	url:"/pages/rank/rank",
					// 	name: '/static/rank.png',
					// 	title: '排行榜'
					// },
					{
						url:"/pages/search/search",
						name: '/static/search.png',
						title: '搜索'
					},
				],
				bannerList: [
					'http://p1.music.126.net/tzhoZqGYdb3yw6eA6ygQLQ==/109951168972510846.jpg',
					'http://p1.music.126.net/ogRfauS6qy5_mNc4UnkcYQ==/109951168972497782.jpg',
					'http://p1.music.126.net/5cP53ox49cDaZ7cN9kjjzQ==/109951168972721495.jpg',
				]
			}
		},
		computed:{
			...mapState(['showPlayCard'])
		},
		onLoad(opt) {
			let keywords = opt.keywords || "";
			if (!uni.$isEmpty(keywords)) {
				keywords = decodeURIComponent(keywords);
				uni.$link("/pages/search/search?keywords="+keywords);
			}
			this.getBanner();
			this.getSongList();
			this.getPutSongList();
		},
		methods: {
			...mapMutations(['initNowPlaySongList','moreNowPlaySongList']),
			
			/**
			 * 获取推荐歌单歌曲
			 */
			async getPutSongList(){
				let _this = this;
				let requestData = {
					url: '/toplist',
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					if (res.list && res.list.length>0) {
						_this.putId = res.list[0].id;
						_this.baseList.forEach(item=>{
							if (item.title == "每日推荐") {
								item.url = "/pages/put/put?name=每日推荐&id="+ res.list[0].id;
								
								this.initNowPlaySongList(res.list[0].id);
								this.moreNowPlaySongList();
							}
						})
					}
				})
			},
			
			/**
			 * 获取推荐歌单
			 */
			getSongList(){
				let _this = this;
				let requestData = {
					url: '/personalized?limit=6',
					token: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					let songListArr = res.result || "";
					if (songListArr) {
						let songList = [];
						songListArr.forEach(item=>{
							let {id,name,picUrl,playCount} = item;
							let pname = name.replaceAll("【","").replaceAll("】","").slice(0,4) || "百万红心";

							songList.push({id,name,picUrl,playCount,pname});
						})
						_this.songList = songList;
					}
				})
			},
			
			/**
			 * 获取轮播图
			 */
			getBanner(){
				let _this = this;
				let requestData = {
					url: '/banner?type=2',
					token: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					let bannerArr = res.banners || "";
					if (bannerArr) {
						let bannerList = [];
						bannerArr.forEach(item=>{
							bannerList.push(item.pic);
						})
						_this.bannerList = bannerList;
					}
				})
			},
			gridCilck(index){
				uni.$link(this.baseList[index].url);
			},
		}
	}
</script>

<style>
	.wap_content{
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom:  calc(env(safe-area-inset-bottom) + 100rpx);
	}
	
	.banner_box {
		box-sizing: border-box;
		padding: 20rpx;
		width: 100%;
	}
	
	.grid-text{
		font-size: 32rpx;
	}
	
	.song_box{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.song_box_title{
		width: 100%;
		height: 100rpx;
	}
	
	.song_box_title_l{
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.song_box_title_r{
		font-size: 28rpx;
		color: #666;
	}
	
	.song_item_box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.song_item{
		width: 340rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.song_poser_box{
		width: 340rpx;
		height: 340rpx;
		overflow: hidden;
		position: relative;
	}
	
	.song_poser_img{
		width: 100%;
	}
	
	.song_poser_desc{
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.song_poser_desc text{
		font-size: 26rpx;
		color: #fff;
	}
	
	.song_title{
		font-size: 32rpx;
		box-sizing: border-box;
		padding: 10rpx 0;
	}
	
</style>